import React, { Component } from 'react';
import { ANCHORS } from '../../utils/constant';
import LinkTitle from '../common/LinkTitle';
import MarkdownRender from 'react-uwp/MarkdownRender';
import { introduce, expense, notice } from '../../utils/markdown';
import Comment from '../../containers/Comment';
import { Anchor } from 'antd';
const { Link } = Anchor;
export default class Content extends Component {
  constructor(props) {
    super(props);
  }
  anchorRender() {
    return (
      <Anchor bounds={150} getContainer={() => document.body} affix={true}>
        {ANCHORS.map((item, index) => (
          <Link key={index} href={`#${item.href}`} title={item.title} />
        ))}
      </Anchor>
    );
  }
  render() {
    return (
      <div className="dContent">
        {this.anchorRender()}
        <div className="dWrapper">
          <div id={ANCHORS[0].href} className="introduce">
            <LinkTitle title={ANCHORS[0].title} />
            <div className="details">
              <MarkdownRender text={introduce} />
            </div>
          </div>
          <div id={ANCHORS[1].href}>
            <LinkTitle title={ANCHORS[1].title} />
            <div className="details">
              <MarkdownRender text={expense} />
            </div>
          </div>
          <div id={ANCHORS[2].href}>
            <LinkTitle title={ANCHORS[2].title} />
            <div className="details">
              <MarkdownRender text={notice} />
            </div>
          </div>
          <div id={ANCHORS[3].href} className="comment">
            <LinkTitle title={ANCHORS[3].title} id="commentLink" />
            <div className="details">
              <Comment />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
